<template>
  <vc-dialog v-model="showValue" :title="title" width="500" @close="handleClose">
    <div class="actionSheetWrapper">
      <div class="title">
        <span class="middle">报告期：{{ statisticalPeriod }}</span>
      </div>
      <div class="desc" v-if="actionData.calcIndicatorRemark || actionData.contentDescription">
        <div v-if="actionData.calcIndicatorRemark">
          <span v-if="actionData.notAddStar !== 1" class="left">*</span>
          该数据为公司总部口径
        </div>
        <div v-if="actionData.contentDescription">
          <span v-if="actionData.notAddStar !== 1" class="left">*</span>
          {{ actionData.contentDescription }}
        </div>
      </div>
      <div class="content" v-if="actionData.indicatorPublish || actionData.indicatorUnitPublish || actionData.indicatorValuePublish">
        <div class="flex" v-for="(item, index) in popupArr" :key="index">
          <div class="flex-item" :class="[!item.isTheme ? 'name' : 'theme', { boldFont: index === 0 }]">
            {{ emptyHandle(item?.actionData?.[0]) }}
          </div>
          <div class="flex-item" :class="[!item.isTheme ? 'name' : 'theme', { boldFont: index === 0 }, { publishValue: index && item.isTheme }]">
            {{ emptyHandle(item?.actionData?.[1]) }}
          </div>
        </div>
      </div>
      <div class="button" @click="goSourceFile" v-if="actionData.fileUrl">查看报告原文</div>
    </div>
  </vc-dialog>
</template>

<script lang="ts" setup>
import { setHrefUrlTool } from '@/utils';
import { emptyHandle } from '@vc/utils';

interface Props {
  /** 是否显示 */
  show: boolean;
  /** 弹窗数据 */
  actionData?: Record<string, any>;
  /** 弹窗标题 */
  title?: string;
}

const { actionData = {}, show, title = '指标溯源' } = defineProps<Props>();

const showValue = computed({
  get() {
    return show;
  },
  set(value) {
    emit('update:show', value);
  }
});

const statisticalPeriod = computed(() => {
  const statisticalPeriod = actionData.statisticalPeriod || actionData.year;
  return statisticalPeriod && isNaN(statisticalPeriod) ? statisticalPeriod : statisticalPeriod + '年';
});

const popupArr = computed(() => {
  const { indicator, indicatorDisplayUnit, value, indicatorPublish, indicatorUnitPublish, indicatorValuePublish } = actionData;
  return [
    { actionData: ['标准化展示数据', '原始披露数据'], isTheme: true },
    { actionData: ['标准化指标名称', '披露指标名称'], isTheme: false },
    { actionData: [indicator, indicatorPublish], isTheme: true },
    { actionData: ['标准化单位', '披露单位'], isTheme: false },
    { actionData: [indicatorDisplayUnit, indicatorUnitPublish], isTheme: true },
    { actionData: ['展示值', '披露值'], isTheme: false },
    { actionData: [value, indicatorValuePublish], isTheme: true }
  ];
});

// 溯源查看报告
const goSourceFile = () => {
  setHrefUrlTool(actionData.fileType, `${actionData.fileUrl}#page=${actionData.locationInDocument ? actionData.locationInDocument.split('P')[1] : ''}`);
};

const emit = defineEmits(['update:show']);

const handleClose = () => {
  emit('update:show', false);
};
</script>
<style lang="scss" scoped>
.actionSheetWrapper {
  padding: 20px 24px 40px 24px;

  .title {
    position: relative;
    padding-bottom: 13px;
    margin-bottom: 8px;

    .center {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      color: #111111;
      text-align: center;
    }

    .middle {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      line-height: 18px;
      color: #111111;
    }

    .right {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      line-height: 18px;
      color: #111111;
    }
  }

  .desc {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;
    color: #111111;

    .left {
      color: #ed3f31;
      margin-right: 4px;
    }
  }

  .content {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      background: #f6f6f6;
      top: 0;
      left: 45%;
      transform: translateX(-50%);
    }

    .flex {
      display: flex;

      .flex-item {
        flex: 1;

        &.name {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 13px;
          line-height: 18px;
          color: #8b8c8c;
          margin-bottom: 8px;
        }

        &.theme {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #111111;
          margin-bottom: 16px;
        }

        &.boldFont {
          font-weight: 500;
        }

        &.publishValue {
          font-size: 14px;
          line-height: 20px;
          color: $color-primary;
        }

        &:last-child {
          padding-left: 30px;
        }
      }
    }
  }

  .button {
    width: 150px;
    height: 36px;
    background: #15b4f1;
    border-radius: 16px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    cursor: pointer;
  }
}
</style>
